<template>
    <div class="box">

        <!--路径-->
        <div class="box-path">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/demo/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!--表单按钮-->
        <div class="box-button">
            <el-row>
                <el-col :span="14" class="box-button-opt">
                    <el-button size="mini" type="primary">添加<i class="el-icon-plus el-icon--right"></i></el-button>
                    <el-button size="mini" type="danger" @click="eventDelete(null)">删除<i
                            class="el-icon-delete el-icon--right"></i></el-button>
                </el-col>
                <el-col :span="10" class="box-button-txt">
                    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="mini">
                        <el-select v-model="select" slot="prepend" placeholder="请选择" size="mini">
                            <el-option label="角色名称" value="1"></el-option>
                            <el-option label="员工工号" value="2"></el-option>
                        </el-select>
                        <el-button type="success" slot="append" icon="el-icon-search">查询</el-button>
                    </el-input>
                </el-col>
            </el-row>
        </div>

        <!--数据-->
        <div class="box-data">
            <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="主键ID">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="120">
                </el-table-column>
                <el-table-column prop="remark" label="描述" width="300">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <div class="buttons-opt">
                            <i type="danger" class="el-icon-edit" title="编辑"></i>
                            <i class="el-icon-delete" title="删除" @click="eventDelete(scope.row)"></i>
                            <i type="danger" class="el-icon-setting" title="配置菜单" @click="dialogConfig(scope.row)"></i>
                        </div>

                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="box-pages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pages.pageIndex" :page-sizes="[8, 15, 20, 25]" :page-size="pages.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
            </el-pagination>
        </div>

        <!-- dialog-->
        <el-dialog title="配置菜单" :visible.sync="dialogConfigVisible" width="30%">
            <span>角色名称：{{ roleName }}</span>
            <span>
                <el-tree :data="menuData" ref="treeid" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
                    :default-checked-keys="[5]" :props="defaultProps">
                </el-tree>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogConfigVisible = false">取 消</el-button>
                <el-button type="primary" @click="eventConfigMenu">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input1: '',
            input2: '',
            input3: '',
            select: '角色名称',
            multipleSelection: [],
            pages: {
                total: 0,
                pageIndex: 1,
                pageSize: 8
            },
            dataList: []
            //配置菜单相关
            , roleName: ''
            , roleId: ''
            , dialogConfigVisible: false
            , defaultProps: {
                children: 'children',
                label: 'name'
            }
            , menuData: []
        }
    },
    mounted() {
        // this.dataList = this.tableData
        // this.pages.total = this.tableData.length;
        this.loadData()
    },
    methods: {
        eventConfigMenu() {
            this.dialogConfigVisible = false

            let menusId = this.$refs.treeid.getCheckedKeys()

            //需要解决的问题就是如何获取
            //1）这个编辑的角色ID ---可以通过弹出框传值获取
            //2) 选中的菜单的ID  ---可以通过this.$refs.id的形式获取
            let data = []

            menusId.forEach(x => {
                data.push(
                    {
                        "roleId": this.roleId,
                        "meunId": x
                    }
                )
            })

            //console.log(data)
            //post提交数据
            let url= this.$baseUrl + 'rbac/role/config'

            this.$http.post(url,data).then(res=>{
                console.log(res)
            })

        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        dialogConfig(row) {
            this.dialogConfigVisible = true
            this.roleName = row.name
            this.roleId = row.id

            //加载菜单
            let url = this.$baseUrl + 'rbac/menu/recursion'
            this.$http.get(url).then(res => {
                this.menuData = res.data.data
            })
        },
        eventDelete(row) {
            if (row != null) {
                this.multipleSelection.push(row)
            }

            if (this.multipleSelection.length <= 0) {
                this.$message.error('请选择需要删除的数据！')
                return
            }

            this.$confirm('此操作将永久删除被中的数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = this.$baseUrl + 'rbac/role/delete'
                this.$http.delete(url, { data: this.multipleSelection }).then(res => {
                    if (res.data.code == 200) {

                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });

                        this.loadData()
                    }
                })
                    .catch(error => {
                        //console.log(error)
                        if (error.code == 'ERR_BAD_REQUEST') {
                            this.$message.error(error.message)
                        }
                    })
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });
        },
        //加载数据列表
        loadData() {
            //let token = localStorage.getItem('token')
            let url = this.$baseUrl + 'rbac/role/query/pages'  //?pageIndex=1&pageSize=9'
            this.$http.get(url, {
                params: {
                    pageIndex: this.pages.pageIndex,
                    pageSize: this.pages.pageSize
                }
            }).then(res => {
                //console.log(res)
                this.dataList = res.data.data.items
                this.pages.total = res.data.data.total
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.pages.pageSize = val
            this.loadData()
        },
        handleCurrentChange(val) {
            this.pages.pageIndex = val
            this.loadData()
        }
    }
}
</script>

<style>
.el-select .el-input {
    width: 100px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>